<!--
 @description 订单查询列表
 @fileName index.vue
 @author zengqiongying
 @created 2022/07/27 15:29:51
-->
<template>
  <div class="mine-container">
    <MineHeader arrow title="我的订单" :back-func="handleBackPage" />
    <div class="order-head">
      <OrderFilter
        :dict-data="dictData"
        @refresh="refreshFilterChange"
      />
    </div>
    <div>
      <List
        ref="list"
        class="order-list"
        :finished.sync="finished"
        :reset-fun="resetData"
        :load="load"
        :refresh="load"
      >
        <Item
          v-for="(item,i) in list"
          :key="i"
          :o-data="item"
          :dict-data="dictData"
        />
      </List>
    </div>
  </div>
</template>

<script>
import OrderFilter from './components/OrderFilter/index'
import List from '@/components/PageList'
import Item from './components/OrderItem'
import { getDictByType } from '@/apis/dataDict'
import { getOrderList } from '@/apis/order'

export default {
  name: 'OrderList',
  components: {
    OrderFilter, List, Item
  },
  data() {
    return {
      dictData: {},
      list: [],
      finished: false, // 列表是否加载完成
      filtersRaw: [
        {
          id: 'orderSource',
          property: 'orderSource',
          operator: 'in',
          value: `[02]`
        }
      ]
    }
  },

  computed: {},

  created() {
    this.getDictList()
  },
  activated() {},

  mounted() {},
  beforeRouteLeave(to, from, next) {
    if (to.name !== 'OrderDetail') {
      this.$removeKeepAliveCache(this)
    }
    next()
  },
  methods: {
    async getDictList() {
      const appCode = 'retail'
      const sourceList = await getDictByType({ appCode, dictTypeCode: 'ORDER_SOURCE' })
      const statusList = await getDictByType({ appCode, dictTypeCode: 'STATUS' })
      const paymentStateList = [
        { dictCode: '01', dictName: '未结清' },
        { dictCode: '02', dictName: '已结清' }
      ]
      this.dictData = {
        'ORDER_SOURCE': sourceList,
        'STATUS': statusList,
        'PAYMENT_STATUS': paymentStateList
      }
    },
    refreshFilterChange(params) {
      const filtersRaw = []
      for (const key in params) {
        const value = params[key] || ''
        if (value && value.length > 0) {
          if (['saleDate', 'createTime'].includes(key)) {
            filtersRaw.push({
              id: `${key}1`,
              property: key,
              operator: '>=',
              value: `${value[0]} 00:00:00`
            })
            filtersRaw.push({
              id: `${key}2`,
              property: key,
              operator: '<=',
              value: `${value[1]} 23:59:59`
            })
          } else {
            filtersRaw.push({
              id: key,
              property: key,
              operator: 'in',
              value: `[${value.join(',')}]`
            })
          }
        }
      }
      this.filtersRaw = filtersRaw
      this.$nextTick(() => {
        this.resetPageData()
      })
    },
    resetPageData() {
      if (this.$refs.list) {
        this.$refs.list.resetPageData()
      }
    },
    load(page, rows) {
      const data = {
        page,
        rows,
        filtersRaw: this.filtersRaw
      }
      return getOrderList(data).then(res => {
        const records = res.data.records || []
        this.list.push(...records)
        if (this.list.length >= res.data.total) {
          this.finished = true
        }
      })
    },
    resetData() {
      this.list = []
    },
    handleBackPage() {
      this.$router.replace('/my')
    },
    handleChange() {

    }
  }
}

</script>
<style lang='less' scoped>
.order-head{
  position: fixed;
  left: 0;
  right: 0;
  top: 44PX;
  z-index: 99;
  background: #FFFFFF;
  box-shadow: 0px 2px 14px 0px rgba(0,0,0,0.0700);
}
.order-list{
  padding-top: 142px; // 126px+16px
  padding-left: 16px;
  padding-right: 16px;
  min-height:calc(100vh - 44PX);
  box-sizing: border-box;
}

</style>
